<template>
	<view class="form">
		<u-form :model="values" ref="uForm" :label-position="labelPosition" :rules="rules" :error-type="errorType">
			<u-form-item :label="field.label" v-for="(field, index) in fields" :key="index" :prop="field.prop"
				:label-width="field.labelWidth" :label-align="labelAlign" :border-bottom="borderBottom">
               
				<span style="width: 100%;">
					<!--输入框-->
					<u-input v-model="values[field.prop]" :placeholder="field.placeholder" :border="field.border"
						v-if="field.type=='input'" />
						<u-input v-model="values[field.prop]" type="number" @confirm="confirm" :placeholder="field.placeholder" :border="field.border"
							v-if="field.type=='number'" /> <slot  name="slots"></slot>
					<!--密码框-->
					<u-input v-model="values[field.prop]" type="password" :border="field.border"
						:password-icon="passwordIcon" v-if="field.type=='password'" :placeholder="field.placeholder" />
					<!--下拉框-->
					<span v-if="field.type=='select'">
						<u-input v-model="values[field.prop]" type="select" :border="field.border" :placeholder="field.placeholder"
							@click="clickSelect(field.prop,index)" />
							<u-select v-model="field.show" :list="actionSheetList" @confirm="actionSheetCallback"></u-select>
						<!-- <u-action-sheet :list="actionSheetList" v-model="field.show" > -->
						<!-- </u-action-sheet> -->
					</span>
					<!--文本框-->
					<u-input v-model="values[field.prop]" type="textarea" :border="field.border"
						:auto-height="autoHeight" v-if="field.type=='textarea'" />
					<u-input v-model="values[field.prop]" type="text" :border="field.border"
						v-if="field.type=='text'" />

				</span>
				<template slot="right">
					<view class="" v-if="field.checked">
						<u-toast ref="uToast"></u-toast>
						<u-verification-code :seconds="seconds" @end="end" @start="start" ref="uCode"
							@change="codeChange"></u-verification-code>
						<!-- <u-button @tap="getCode">{{tips}}</u-button> -->
							<view class="code" @click="getCode">
							<view class="tips">
								{{tips}}
							</view>
						</view>
					</view>
					<view v-if="field.name" class="field_name">{{field.name}}</view>
				</template>
				 
			</u-form-item>
			<slot  name="slot"></slot>
		</u-form>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
import {mapActions} from 'vuex'
	export default {
		props: {
			//表单绑定值
			values: {
				type: Object,
				default: {}
			},
			//表单表头
			fields: {
				type: Array,
				default: []
			},
			//label名字显示位置
			labelPosition: {
				type: String,
				default: 'left'
			},
			//表单校验规则
			rules: {
				type: Object,
				default: () => ({}),
			},
			//密码查看小眼睛
			passwordIcon: {
				type: Boolean,
				default: true
			},
			//文本框高度是否随文本变化
			autoHeight: {
				type: Boolean,
				default: false
			},
			labelAlign: {
				type: String,
				default: 'right'
			},
			actionSheetList:{
				type: Array,
			},
			borderBottom:{
				type:Boolean,
				default:false
			},
			value:{
              type:String,
			  default:'value'
			}
		},
		data() {
			return {
				tips: '',
				seconds: 60,
				errorType: ['toast'],
				prop: '',
			}
		},
		components: {

		},
		methods: {
			...mapActions({
				identifyingCode:'LOGIN/IDENTIFYING_CODE'//获取验证码
			}),
			confirm(){
              this.$emit('confirm');
			},
			submit() {
				
				let flag = true
				this.$refs.uForm.validate(valid => {
					console.log(valid)
					if (valid) {
						flag = true
					} else {
						flag = false
					}
				});
				return flag
			},
			actionSheetCallback(data) {
				this.values[this.prop] = data[0][this.value]
			},
			clickSelect(val, index) {
		
				this.fields[index].show = true
				this.prop = val
			},
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if(this.values.mobile==''){
						 this.$u.toast('请输入手机号');
                 return
				}
				if (this.$refs.uCode[0].canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
				setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						
						// 通知验证码组件内部开始倒计时
						
						this.identifyingCode({mobile:this.values.mobile,event:'app'}).then(res=>{
							if(res){
                             this.$u.toast('验证码已发送');
							 this.$refs.uCode[0].start();
							}
						})
					}, 1000);
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
			end() {
			
			},
			start() {
				
			}
		},
		mounted() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad(){
			this.$refs.uForm.setRules(this.rules);
		},
		watch: {},
		computed: {

		},


	}
</script>

<style scoped lang='scss'>
.code{
	width: 220rpx;
	height: 72rpx;
	font-size: 32rpx;
	position: relative;
	color: #E24D49;
	margin-right: 30rpx;
}
.tips{
	position: absolute;
	right: 0px;
}
.field_name{
	color: #0A0B16;
	position: absolute;
	right: 64rpx;
}
</style>
